﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="1.aspx.cs" Inherits="BaseWeb.JQuery.其他研究._" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>draggable()拖拽和sortable()排序方法</title>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <!--
       jQuery-ui——draggable()拖拽和sortable()排序方法

        draggable()——此方法为获取元素的jQuery对象后，调用此ui方法即可。
        sortable()——此方法为获取父元素的jQuery对象后，调用此方法，即可对子节点进行排序。
    -->

    <script type="text/javascript">
    <!--
        $(document).ready(function()
        {
            $("#CC").draggable();  // 拖拽ID=CC的DIV到窗口的任何位置 
            $(".uli").sortable(); //调用此方法，可对class=uli的父节点里面的子元素进行排序。 
            $("#hello").sortable(); //同时也可对列表进行排序
        });
    //-->
    </script>

    <style type="text/css">
        #hello
        {
            width: 200px;
            height: 200px;
        }
        #CC
        {
            width: 50px;
            height: 50px;
        }
        #hello
        {
            background: #DDDDDD;
        }
        #CC
        {
            background: #333FFA;
        }
        .di
        {
            width: 400px;
            height: 400px;
        }
        .module
        {
            border: 1px solid red;
            padding: 10 10 10 10;
            margin: 10 10 10 10;
            width: 40px;
            height: 40px;
            background: gray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="hello" class="di">
        <div class="module" style="text-align: left;">
            num01</div>
        <div class="module" style="text-align: center;">
            num02</div>
        <div class="module" style="text-align: right;">
            num03</div>
    </div>
    <div id="CC" class="di">
    </div>
    <ul class="uli">
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
    </ul>
    </form>
</body>
</html>
